<template>
<!-- 滚动视图 -->
<!-- 滚动视图的大小有外部决定 -->
  <div class="scroll-view" ref="scroll">
    <!-- 滚动容器 -->
    <div class="scroll-container" :style="{width: scrollWidth}">
      <!-- 滚动的内容 -->
      <slot/>
    </div>
  </div>
</template>

<script>
import IScroll from './iscroll'
export default {
  // 公共组件，一般都在组件内部定好名字，然后调用者使用内部定义好的名字
  name: "app-scroll",
  props: {
    // 外部属性，定义x轴是否可以滚动
    scrollX: {
      type: Boolean,
      default: false
    },
    // 外部属性，定义y轴是否可以滚动
    scrollY: {
      type: Boolean,
      default: true
    },
    // x轴可以滚动的大小
    scrollWidth: {
      type: String,
      default: '100%'
    }
  },
  methods: {
    refresh(){
      // 调用滚动视图的刷新
      this.scroll.refresh();
    }
  },
  mounted(){
    // 创建滚动视图
    this.scroll = new IScroll(this.$refs.scroll, {
      scrollX: this.scrollX,
      scrollY: this.scrollY,
      freeScroll: this.scrollX && this.scrollY,
      tap: true,
      click: true
    });

    this.scroll.on('beforeScrollStart', ()=>{
      this.scroll.refresh();
    })
  }
}
</script>

<style scoped>
.scroll-view, .scroll-container{
  overflow: hidden;
}
</style>